<template>
  <footer>
    <ul>
      <li :class="['addShelf', { hasAdd: addBook.isAdd }]" @click="addBooshelf">
        {{ addBook.text }}
      </li>
      <li class="read" @click="gotoContent">立即阅读</li>
    </ul>
  </footer>
</template>

<script>
export default {
  props: {
    addBook: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      text: "加入书架",
      bookId: "-1",
      hasAdd: false,
    };
  },
  methods: {
    addBooshelf() {
      if (this.addBook.isAdd) return;
      if (!this.addBook.isAdd) {
        this.addBook.text = "已在书架";
        this.addBook.isAdd = true;
        this.$emit("addBooshelf");
      }
    },
    gotoContent() {
      this.$emit("gotoContent");
    },
  },
  created() {
    this.text = this.addBook.text;
  },
};
</script>

<style lang="scss" scoped>
$h: 60px;
footer {
  width: 100%;
  height: $h;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
}

ul {
  width: 100%;
  height: $h;
  font-size: 20px;
  color: #666;
  font-size: 18px;
  display: flex;
  align-items: center;

  li {
    flex: 1;
    height: $h;
    line-height: $h;
    border-top: 1px solid #999;
  }
  .addShelf {
    color: #000;
    background-color: #fff;
  }
  .hasAdd {
    color: #666;
  }
  .read {
    color: #fafafa;
    background-color: #ec2121;
  }
}
</style>